<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="all" />
    <title>我的博客</title>
    <link rel="stylesheet" href="../../frontTool/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" />
    <link rel="stylesheet" href="../../frontTool/css/master.css" />
    <link rel="stylesheet" href="../../frontTool/css/gloable.css" />
    <link rel="stylesheet" href="../../frontTool/css/nprogress.css" />
    <link rel="stylesheet" href="../../frontTool/css/blog.css" />
	
	<link rel="stylesheet" href="../../js/layui/css/layui.css"/>
	<link rel="stylesheet" href="../../css/Semantic-UI-CSS-master/semantic.min.css" />
	
	<script src="../../js/vue/vue.js"></script>
	<script src="../../js/vue/axios.min.js"></script>
	<script src="../../js/layui/layui.js"></script>
	
	<style type="text/css">
		.zth-but{
			padding-left: 30%;
			margin-top: 35px;
		}
		.zth-span-css{
			position:absolute;
			left:220px;
			bottom:-15px;
			height:60px;
			background:rgb(128,128,128);
			display: inline-block; 
		}
		#category a:hover{
			background: rgb(248,249,247);
		}
	</style>
</head>
<body>
	<div id="app">
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Mr.liu</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="article.html">博客</a></li>
                        <li><a href="message.html">留言</a></li>
						<li><a href="message.html">关于</a></li>
                        <li><a href="link.html">友链</a></li>
                    </ul>
                </nav>
                <a href="/User/QQLogin" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
		            
						<!-- <section class="article-item zoomIn article">       
							<div class="fc-flag">置顶</div>   
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>       
								<a href="">类型：Java学习路线推荐</a>   
							</h5>   
							<div class="time">       
								<span class="day">1</span>       
								<span class="month fs-18">7<span class="fs-14">月</span></span>       
								<span class="year fs-18 ml10">2020</span>   
							</div>   
							<div class="content">       
								<a href="read.html" class="cover img-light">           
									<img src="../../frontTool/images/java.jpg">       
								</a>
								这篇文章是为了介绍自己自学用过的Java视频资料。本套整合教程总共180+G，共450+小时。考虑到绝大部分视频至少要看两遍，而且视频总时长并不代表学习时长，所以零基础初学者总学习时间大约为：600小时视频时长 + 100小时理解 + 100小时练习，至少需要800小时。你可能觉得自己能一天学习8小时，实际上平均下来每天能学4小时都算厉害了。总会有各种原因，比如当天内容太难，公司聚会，要出差等等。如果周末你也是坚持学习，那么最理想状况下，6个半月就可以学完，达到工作后能被人带的水平。但我知道那其实基本不可能。
							</div>   
							<div class="read-more">       
								<a href="read.html" class="fc-black f-fwb">继续阅读</a>   
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag">标签：java路线</a>       
								</div>       
								<div class="f-fr">           
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num">213</i>           
									</span>           
									<span class="ml20">               
										<i class="fa fa-comments fs-16"></i>               
										<a href="javascript:void(0)" class="num fc-grey">1</a>           
									</span>       
								</div>   
							</aside>
						</section> -->
						
						<section v-for="(ss,index) in data" class="article-item zoomIn article">       
							<div class="fc-flag">置顶</div>   
							<h5 class="title">       
								<span class="fc-blue">【原创】</span>       
								<a href="">{{ss.blog_category_name}}</a>   
							</h5>
							<div class="time">       
								<span class="day">{{day[index]}}</span>       
								<span class="month fs-18">{{month[index]}}<span class="fs-14">月</span></span>       
								<span class="year fs-18 ml10">{{year[index]}}</span>   
							</div>
							<div class="content">
								<a href="read.html" class="cover img-light">           
									<img :src="ss.blog_cover_image">
								</a>
								<span v-html="ss.blog_content">
								</span>
							</div>   
							<div class="read-more">       
								<a href="javascript:void(0);" class="fc-black f-fwb" @click="plus">继续阅读</a>   
							</div>    
							<aside class="f-oh footer">       
								<div class="f-fl tags">           
									<i class="tags icon"></i>
									<a class="tag">{{ss.blog_tags}}</a>       
								</div>       
								<div class="f-fr">           
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num">213</i>           
									</span>           
									<span class="ml20">               
										<i class="fa fa-comments fs-16"></i>               
										<a href="javascript:void(0)" class="num fc-grey">1</a>           
									</span>       
								</div>   
							</aside>
						</section>
						
		            </article>
		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
					        <label class="search-wrap">
					            <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
					            <span class="zth-span-css">
				    				<i class="search icon"></i>
				    			</span>
					        </label>
			        		<ul class="search-result"></ul>
			    		</div>
			    		
			    		<ul class="category mt20" id="category">
							<li><a href="/Blog/Article">全部文章</a></li>
				        	<li v-for="(zz,index) in typedata">
								<a href="/Blog/Article">{{zz.category_name}}</a>
							</li>
			    		</ul>
					</div>
					
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
					            <a href="/Blog/Article/1/">Java</a>
					            <a href="/Blog/Article/2/">前端</a>
					            <a href="/Blog/Article/3/">Python</a>
					            <a href="/Blog/Article/4/">PHP</a>
					            <a href="/Blog/Article/5/">其它</a>
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li> <a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>
					                <li> <a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>
					                <li> <a href="/Blog/Read/13">java学习路线</a></li>
					                <li> <a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
					                <li> <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li>
					                <li> <a href="/Blog/Read/11">小白轻松入门Redis</a></li>
					                <li> <a href="/Blog/Read/14">微信一键登录功能的实现</a></li>
					                <li> <a href="/Blog/Read/8">NPOI导入导出Excel</a></li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">置顶推荐</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li> <a href="/Blog/Read/16">java学习路线</a></li>
					                <li> <a href="/Blog/Read/14">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
					                <li> <a href="/Blog/Read/9">小白轻松入门Redis</a></li>
					        </ul>
					    </div>
					</div>
					<div class="other-item">
					    <h5 class="other-item-title">最近访客</h5>
					    <div class="inner">
					        <dl class="vistor">
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/72388EA977643E8F97111222675720B1/100"><cite>Anonymous</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/342F777E313DDF5CCD6E3E707BB0770B/100"><cite>Dekstra</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EA5D00A72C0C43ECD8FC481BD274DEEC/100"><cite>惜i</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/EF18CEC98150D2442183AA30F05AAD7B/100"><cite>↙Aㄨ计划 ◆莪↘</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/3D8D91AD2BAFD36F5AC494DA51E270E6/100"><cite>.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/B745A110DAB712A0E6C5D0B633E905D3/100"><cite>Lambert.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/E9BA3A2499EC068B7917B9EF45C4D13C/100"><cite>64ღ</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/09F92966169272DD7DD9999E709A0204/100"><cite>doBoor</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59991D53192643A1A651383847332EB6/100"><cite>毛毛小妖</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/FF34F311DDC43E2AF63BE897BCA24F05/100"><cite>NULL</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/59AA25A7627284AE62C8E6EBDC6FE417/100"><cite>吓一跳</cite></a></dd>
					                <dd><a href="javasript:;"><img src="https://thirdqq.qlogo.cn/qqapp/101465933/28B021E0F5AF0A4B9B781A24329FE897/100"><cite>如初</cite></a></dd>
					        </dl>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
		
		<div class="zth-but">
			<i class="arrow left icon"@click="subtract" style="font-size: 30px;"></i>
			<i class="arrow right icon" @click="plus" style="font-size: 30px;"></i>
		</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                        <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>
                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                         Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by ZQ博客
                    </p>
                </div>
            </div>
        </div>
    </footer>
	</div>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../frontTool/js/gloable.js"></script>
    <script src="../../frontTool/js/nprogress.js"></script>
    <script>NProgress.start();</script>
 	<script src="../../frontTool/js/article.js"></script>
    <script> 
        window.onload = function () {
            NProgress.done();
        };
		
		new Vue({
			el:'#app',
			data(){
				return{
					data:[],
					typedata:[],
					page:1,
					year:[],//年
					month:[],//月
					day:[]//日
				}
			},
			mounted:function(){
				this.blogAll();
				this.typeAll();
			},
			methods:{
				//查询出全部博客
				blogAll:function(){
					axios.get('/ssb/blog/blogAll?page='+this.page).then(res=>{
						var o=res.data.data;
						this.data=o;
						for(var i=0;i<o.length;i++){
							var time=o[i].create_time
							//截取年
							var sub1=time.substr(0,4);
							this.year.push(sub1);
							
							//截取月
							var index1=time.indexOf("-");
							var sub2=time.substr(index1+1,2);
							this.month.push(sub2);
							
							var index2=time.indexOf("T");
							var sub3=time.substr(index2-2,2);
							this.day.push(sub3);
						}
						
					},err=>{
						console.log(err);
					});
				},
				//查询全部类型
				typeAll:function(){
					axios.get('/ssb/category/CategoryAll').then(res=>{
						console.log(res.data.data);
						this.typedata=res.data.data;
					},err=>{
						console.log(err);
					});
				},
				//下一页
				plus:function(){
					this.page++;
					this.blogAll();
				},
				//上一页
				subtract:function(){
					this.page--;
					this.blogAll();
				}
			}
		});
    </script>
</body>
</html>
